---
title: 시작하기
version: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";

import pubspec from "../../../../i18n/ko/docusaurus-plugin-content-docs/current/getting_started/pubspec";
import dartHelloWorld from "../../../../i18n/ko/docusaurus-plugin-content-docs/current/getting_started/dart_hello_world";
import helloWorld from "../../../../i18n/ko/docusaurus-plugin-content-docs/current/getting_started/hello_world";
import dartPubspec from "../../../../i18n/ko/docusaurus-plugin-content-docs/current/getting_started/dart_pubspec";

import { 
  trimSnippet,
  AutoSnippet,
  When } from "../../../../src/components/CodeSnippet";

---

## Try Riverpod online

To get a feel of Riverpod, try it online on [Dartpad](https://dartpad.dev/?null_safety=true&id=ef06ab3ce0b822e6cc5db0575248e6e2).

[Riverpod]의 내부 메커니즘에 들어가기 앞서, 우선 [Riverpod]을 설치하는 방법과
"Hello world"를 표시하는 방법부터 함께 시작해봅시다.

## 어떤 패키지를 설치해야하나요?

[Riverpod]은 여러 종류의 패키지가 있습니다. 각각 다른 사용 목적을 가지고 있으며 개별마다 상이한 특징을 가지고 있습니다.
어떤 [Riverpod] 패키지를 설치할지는 만드는 앱의 형태에 따라 다릅니다.

다음 아래의 표를 참조하여 사용할 패키지를 결정할 수 있습니다.

| 앱의 형태                 | 패키지명                                                                          | 설정                                                         |
| ------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| Flutter + [flutter_hooks] | [hooks_riverpod]                                                                  | [flutter_hooks] 과 [Riverpod]을 함께 병용한 패키지           |
| Flutter                   | [flutter_riverpod]                                                                | Flutter 앱에 [Riverpod] 을 사용할 경우의 기본 패키지         |
| Dart(Flutter 사용안함）   | [riverpod](https://github.com/rrousselGit/riverpod/tree/master/packages/riverpod) | Flutter 에 관련된 모든 클래스가 완전제거된 [Riverpod] 패키지 |

## 패키지 설치 방법

설치할 패키지의 종류가 결정되었다면, `pubspec.yaml`에 아래의 방법으로 패키지를 추가합니다.

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet title="pubspec.yaml" language="yaml" {...pubspec}></AutoSnippet>

패키지 추가 후 `flutter pub get` 를 실행해주세요.

<When codegen={true}>
  마지막으로, {" "}를 실행하여 코드를 생성합니다.
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="pubspec.yaml"
  language="yaml"
  {...dartPubspec}
></AutoSnippet>

패키지 추가 후 `dart pub get`를 실행해주세요.

<When codegen={true}>
  마지막으로, {" "}를 실행하여 코드를 생성합니다.
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
</Tabs>

이걸로 [Riverpod]이 앱에 추가되었습니다.

## 사용예시: Hello world

[Riverpod]설치를 완료하였다면 이제 사용을 시작해봅시다.
아래의 예제코드를 실행하면 Hello world가 화면에 표시됩니다.

export const foo = 42;

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: "Flutter", value: "flutter_riverpod" },
    { label: "Dart", value: "riverpod" },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...helloWorld}
></AutoSnippet>

`flutter run` 명령어를 실행합니다.
디바이스 화면에 Hello world가 표시됩니다.

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...dartHelloWorld}
></AutoSnippet>

`dart lib/main.dart` 명령어를 실행합니다.
콘솔창에 Hellow world가 출력됩니다.

</TabItem>
</Tabs>

## 더 나아가기: Code Snippets 설치하기

`Flutter`를 `VS Code` 에서 사용하는 경우, 확장에서
[Flutter Riverpod Snippets](https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets)
패키지를 검색하여 [Riverpod] 전용 Code Snippets을 설치하여 사용할 수 있습니다.

`Flutter`를 `Android Studio` 또는 `IntelliJ` 에서 사용하는 경우,
[Flutter Riverpod Snippets](https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets)
를 설치하여 사용할 수 있습니다.

![img](/img/snippets/greetingProvider.gif)


## 다음 단계 선택하기 

기본 컨셉에대해 확인하기:

- [Learn more about providers](/docs/concepts/providers)

cookbook 따라가기:

- [How to test providers](/docs/cookbooks/testing)


[riverpod]: https://github.com/rrousselgit/riverpod
[hooks_riverpod]: https://pub.dev/packages/hooks_riverpod
[flutter_riverpod]: https://pub.dev/packages/flutter_riverpod
[flutter_hooks]: https://github.com/rrousselGit/flutter_hooks
